<template>
	<view class="container">
		<view class="rowCenter" style="height: 30vh;">
			<uv-image src="/static/logo.png" width="120px" height="120px" radius="10px"></uv-image>
		</view>
		<!-- 账号登录 -->
		<view class="cloumCenter w100 gap10" v-if="!isCode">
			<view class="w100">
				<lableInput label="账号" placeholder="请输入账号" v-model="userLoginInfo.account" />
			</view>
			<PasswordInput label="密码" placeholder="请输入密码" v-model="userLoginInfo.password" :borderTop="true"
				@input="input" />
			<uv-gap height="40"></uv-gap>
			<fui-button background="var(--themeColor)" size="large" shape="circle" text="登录"
				@click="login"></fui-button>
		</view>
		<!-- 验证码登录 -->
		<view class="cloumCenter w100 gap10" v-else>
			<view class="w100">
				<lableInput label="账号" placeholder="请输入账号" v-model="userLoginInfo.account" />
			</view>
			<view class="w100">
				<lableInput label="验证码" :phone='userLoginInfo.account' placeholder="请输入验证码" isCode="true"
					@get-code="getCode" v-model="userLoginInfo.code" />
			</view>
			<uv-gap height="40"></uv-gap>
			<fui-button background="var(--themeColor)" size="large" shape="circle" text="登录"
				@click="login"></fui-button>
		</view>
		<uv-gap height="20"></uv-gap>
		<view class="rowCenter">
			<text class="titleH2" @click="goPage">忘记密码</text>
			<text class="titleH2" style="position: relative;left: 40rpx;"
				@click="changeLoginWay">{{isCode?'账号登录':'验证码登录'}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	// 引入接口方法
	import {
		getSendSmsApi,
		loginByPhoneApi,
		loginApi
	} from '/api/login.js'
	const password = ref(true);
	const change = () => {
		password.value = !password.value;
	}
	// 用户信息
	let userLoginInfo = reactive({
		account: '15666666666',
		password: '123456',
		code: ''
	})
	// 判断当前是否验证码登录
	let isCode = ref(false)
	// 切换登录方式
	const changeLoginWay = () => {
		isCode.value = !isCode.value
	}
	// 获取验证码倒计时
	let countdown = ref(0)
	// 校验手机号
	const isValidPhone = (phone) => {
		const reg = /^1[3-9]\d{9}$/;
		return reg.test(phone);
	}
	// 获取验证码的方法
	const getCode = async () => {
		let data = {
			areaCode: '',
			phone: userLoginInfo.account
		}
		let res = await getSendSmsApi(data)
		console.log(res.data.code);
	}

	const login = async () => {
		if (!userLoginInfo.account) {
			uni.showToast({
				title: '账号不能为空',
				icon: 'none'
			});
			return;
		}
		if (!isValidPhone(userLoginInfo.account)) {
			uni.showToast({
				title: '请输入正确的手机号格式',
				icon: 'none'
			});
			return;
		}
		if (isCode.value) {
			// 验证码登录
			if (!userLoginInfo.code) {
				uni.showToast({
					title: '验证码不能为空',
					icon: 'none'
				});
				return;
			}
			let data = {
				phone: userLoginInfo.account,
				smsCode: userLoginInfo.code
			}
			let res = await loginByPhoneApi(data)
			console.log(res);
		} else {
			// 密码登录

			if (!userLoginInfo.password) {
				uni.showToast({
					title: '密码不能为空',
					icon: 'none'
				});
				return;
			}
			let data = {
				username: userLoginInfo.account,
				password: userLoginInfo.password
			}
			let res = await loginApi(data)
			console.log(res);
			uni.setStorageSync('token', res.data.token)
			uni.setStorageSync('userInfo', res.data.loginUser.user)
		}
		uni.showToast({
			title: '登录成功',
			icon: 'success'
		})
		uni.navigateTo({
			url: `/pages/chooseUser/chooseUser`
		})
	}
	const goPage = () => {
		uni.navigateTo({
			url: `/publicPage/inputCode/inputCode?title=${'忘记密码'}`
		})
	}
</script>

<style>

</style>